<template>
	<view class="page-box" style="height:100%">
		<view class="bgimg-box">
			<image class="wh100" :src="`${staticUrl}big_bgimg.png`" mode="widthFix"></image>
			<uni-cusTitle title='热门推荐' :isIcon='true' img='/static/index/jiantou1.png' color='#000' :iscIcon='true'></uni-cusTitle>
	
			<view class="list-box">
				<template v-if="list.length>0">
					<view class="item-box" v-for="(item,index) in list" :key="index" @click="toDetail(item)">
						<view class="img-box"> <image class="wh100" :src="item.imgurl" mode=""></image> </view>
						<view class="title line-one">{{item.title}}</view>
						<view class="ava-text">
							<view class="ava-img"> <image class="wh100" :src="item.avaimg" mode="aspectFill"></image> </view>
							<text class="name">{{item.name}}</text>
							<view class="ava-icon">
								<view class="icon-img"> <image class="wh100" src="/static/my1.png" mode="aspectFill"></image> </view>
								<!-- <text>{{item.num}}</text> -->
							</view>
						</view>
					</view>
					
					<view class="no-box" v-if="isMore">无更多数据了...</view>
				</template>
				<template v-else>
					<uni-empty tips="'暂无数据...'"></uni-empty>
				</template>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				staticUrl:this.$base.staticUrl,
				isMore:true,
				list:[
					{
						id:1,
						title:'这家店也开到溧水来了，请记住这个位置！！',
						imgurl:'/static/top_back.png',
						name:'咋办一',
						avaimg:'/static/top_back.png',
						num:'33',
					},
					{
						title:'天生桥景区优惠券',
						imgurl:'/static/top_back.png',
						name:'咋办一',
						avaimg:'/static/top_back.png',
						num:'33',
					},
					{
						title:'天生桥景区优惠券',
						imgurl:'/static/top_back.png',
						name:'咋办一',
						avaimg:'/static/top_back.png',
						num:'33',
					},
					{
						title:'天生桥景区优惠券',
						imgurl:'/static/top_back.png',
						name:'咋办一',
						avaimg:'/static/top_back.png',
						num:'33',
					},
					{
						title:'天生桥景区优惠券',
						imgurl:'/static/top_back.png',
						name:'咋办一',
						avaimg:'/static/top_back.png',
						num:'33',
					},
					{
						title:'天生桥景区优惠券',
						imgurl:'/static/top_back.png',
						name:'咋办一',
						avaimg:'/static/top_back.png',
						num:'33',
					},
					{
						title:'天生桥景区优惠券',
						imgurl:'/static/top_back.png',
						name:'咋办一',
						avaimg:'/static/top_back.png',
						num:'33',
					}
				]
			}
		},
		
		onLoad() {
			
		},
		methods: {
			toDetail(item){
				uni.navigateTo({
					url:'./tuijianDetail?id='+item.id
				})
			}
		}
	}
</script>

<style scoped lang="scss">
	.bgimg-box {
		width: 100%;
		height: 100%;
		position: relative;
	
		.list-box {
			width: 100%;
			margin-top:20rpx;
			position: absolute;
			top:150rpx;
			display: flex;
			justify-content: space-between;
			flex-wrap: wrap;
			padding:0 16rpx;
			box-sizing: border-box;
			
			.item-box{
				width:352rpx;
				margin-bottom: 20rpx;
				.img-box{
					width:100%;
					height:440rpx;
					border-radius: 48rpx;
					border: 6rpx solid #FFDD57;
					box-sizing: border-box;
					overflow: hidden;
				}
				
				.title{
					font-size: 26rpx;
					font-weight: bold;
					color: #002A3A;
					line-height: 38rpx;
					margin:12rpx 0;
					padding:0 10rpx;
					box-sizing: border-box;
				}
				
				.ava-text{
					height:50rpx;
					display: flex;
					align-items: center;
					position: relative;
					padding:0 10rpx;
					box-sizing: border-box;
					.ava-img{
						width:48rpx;
						height:48rpx;
						border-radius: 50%;
						overflow: hidden;
						margin-right:12rpx;
					}
					.name{
						font-size: 24rpx;
						color: #000;
					}
					
					.ava-icon{
						font-size: 24rpx;
						color: #3A525E;
						position: absolute;
						right:0rpx;
						display: flex;
						align-items: center;
						
						.icon-img{
							width:28rpx;
							height:24rpx;
						}
					}
				}
			}
		}
	}
</style>